<template>
    <view class="jh-box-mian">
        <view class="jh-nav jh-nav-bg">
            	<view class="jh-nav-tab" @click="tabChange(index)" :class="index==navTab?'jh-nav-tab-active':''" v-for="(item,index) in navTabDataList" :key="index">{{item.name}}</view> 
        </view>
        <view class="jh-box-map jh-nav-bg">
            <view class="jh-box-map-img">
                <image :src="navTabDataList[navTab].pic_path">
            </view>
        </view>
        <view class="jh-nav2 jh-nav-bg" v-if="navTabDataList.length>0">
            <view class="jh-nav2-tab" @click="tabChange2(index)" :class="[index==navTab2?'jh-nav2-tab-active':'',index%4==0?'jh-nav2-tab-first-child':'']" v-for="(item,index) in navTabDataList[navTab].hot" :key="index">{{item.name}}</view>
        </view>
        <view class="jh-box-goods">
            <view class="jh-box-goods-tiltle">
                <view class="jh-goods-tiltle">推荐商品</view>
            </view>
            <view class="jh-goods">
                <view class="jh-goods-list" v-for="(item,index) in goodsList" :key="index" @click="toUrl(item)">
                    <view class="jh-goods-img">
                        <img  :src="item.goods_ur">
                    </view>
                    <view class="jh-goods-info">
                        <view class="jh-goods-name">{{item.goods_name}}</view>
                        <view class="jh-goods-class">
                            <view class="jh-class-1" v-for="(item1,index1) in item.labels_names" :key="index1"><span>{{item1}}</span></view>
                        </view>
                        <view class="jh-goods-price">¥{{item.goods_price}}</view>
                        <view class="jh-goods-num">
                            <view class="jh-goods-stock">库存：{{item.goods_storage || 0}}</view>
                            <view class="jh-goods-volume">销量：{{item.goods_salenum || 0}}</view>
                        </view>
                    </view>
                </view>
                <o-empty bg="#F5F5F5" v-if="goodsList.length==0" text="暂时没有内容哦～"></o-empty>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
    	data() {
    		return {
                scrollTop: 0,
    			navTab: 0,
    			navTabDataList:[],
    			navTab2: 0,
                goodsList:[],
                page: 1,
                hasNext:true,
            }
        },
    	onLoad() {
    
    	},
    	async onShow() {
            await this.getExpHall();
    	},
    	onReachBottom() {
    		if (this.hasNext) {
    		    this.page++;
    		    this.getGoodsExpHall();
    		}
    	},
    	methods: {
    		tabChange(index){
    		    this.navTab=index;
				this.navTab2=0
                this.getExpHall();
    		},
    		tabChange2(index){
    		    this.navTab2=index;
                this.getGoodsExpHall();
    		},
            toUrl(item){
                uni.navigateTo({
                	url: '/mall/goods/info?goods_id='+item.goods_id
                })
            },
            getExpHall(){
                let that = this;
                this.$util.request({
                    url: '/mobile/index.php?act=experience_hall&op=index',
                    method: 'get',
                    data: {},
                }).then(function(res) {
                    if (res.error_code == 0) {
                        that.navTabDataList=res.datas.list;
                        that.getGoodsExpHall();
                    }
                })
            },
            getGoodsExpHall(){
                let that = this;
                this.$util.request({
                    url: '/mobile/index.php?act=experience_hall&op=get_goods',
                    method: 'get',
                    data: {
                        hot_id:that.navTabDataList.length>0?that.navTabDataList[that.navTab].hot[that.navTab2].id:'',
                       curpage:that.page,
                    },
                }).then(function(res) {
                    that.hasNext=res.paged.hasmore;
                    if(that.page==1){
                        that.goodsList=res.list;
                    }else{
                        that.goodsList=that.goodsList.concat(res.list);
                    }
                })
            }
    	}
    }; 
</script>

<style scoped lang="scss">
    page{
        height: 100%;
        background-color: #F5F5F5;
    }
    .jh-nav-bg{
        background-color: #fff;
    }
    .jh-box-mian{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    .scroll-view_H {
        display: flex;
        flex-direction: row;
    	white-space: nowrap;
    	width: 100%;
    }
    .jh-nav{
        /* height: 56rpx; */
        border-radius: 0rpx;
        padding: 0 30rpx 20rpx;
        opacity: 1;
        box-sizing: border-box;
        
        display: flex;
        align-items: center;
        flex-direction: row;
        width: 100%;
        overflow-x: scroll;
        
    }
    .jh-nav-tab{
        height: 88rpx;
        font-size: 30rpx;
        font-family: Source Han Sans CN-Regular, Source Han Sans CN;
        font-weight: 400;
        color: #333333;
        line-height: 88rpx;
        margin-right: 50rpx;
        white-space: nowrap;
    }
    .jh-nav-tab-active{
        font-size: 30rpx;
        font-family: Source Han Sans CN-Bold, Source Han Sans CN;
        font-weight: bold;
        color: #E96A1D;
    }
	::-webkit-scrollbar {
		height: 0;
		width: 0;
		color: transparent;
	}
    .jh-box-map{
        width: 100%;
        height: 400rpx;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .jh-box-map-img image{
        width: 690rpx;
        height: 400rpx;
    }
    .jh-nav2{
       width: 100%;
       opacity: 1;
       box-sizing: border-box;
       padding: 20rpx 30rpx 0;
       display: flex;
       align-items: center;
       flex-direction: row;
       flex-wrap: wrap;
    }
    
    .jh-nav2-tab{
        width: 30%;
        height: 110rpx;
        margin-bottom: 20rpx;
        background: #F5F5F5;
        opacity: 1;
        font-size: 28rpx;
        font-family: Source Han Sans CN-Regular, Source Han Sans CN;
        font-weight: 400;
        color: #333333;
        line-height: 60rpx;
        margin-left: 30rpx;
        
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }
    .jh-nav2-tab-active{
        width: 30%;
        height: 110rpx;
        background: linear-gradient(91deg, #EA8C1E 0%, #E84A1D 100%);
        opacity: 1;
        color: #FFF;
    }
    .jh-nav2-tab:nth-child(3n+1){
        margin-left: 0;
    }
    
    .jh-box-goods{
        display: flex;
        flex-direction: column;
        margin-bottom: 30rpx;
       /* padding: 0 30rpx; */
        background: #F5F5F5;
        width: 100%;
    }
    .jh-box-goods-tiltle{
        padding: 0 30rpx;
        height: 50rpx;
        margin-top: 50rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-direction: row;
    }
    .jh-goods-tiltle{
        font-size: 32rpx;
        font-family: Source Han Sans CN-Bold, Source Han Sans CN;
        font-weight: bold;
        color: #333333;
        line-height: 0rpx;
    }
    .jh-goods-tiltle-more{
        font-size: 16rpx;
        font-family: Source Han Sans CN-Bold, Source Han Sans CN;
        font-weight: bold;
        color: #333333;
        cursor: pointer;
    }
    .jh-goods{
        display: flex;
        justify-content: space-between;
        flex-direction: row;
        flex-wrap: wrap;
        margin-top: 40rpx;
        padding: 0 30rpx;
    }
    .jh-goods-list{
        width: 330rpx;
        display: flex;
        flex-direction: column;
        padding-bottom: 20rpx;
        margin-bottom: 30rpx;
        background: #FFF;
    }
    .jh-goods-img img{
        width: 330rpx;
        height: 330rpx;
    }
    .jh-goods-info{
        display: flex;
        flex-direction: column;
        padding: 0 20rpx;
        margin-top: 10rpx;
    }
    .jh-goods-name{
        font-size: 28rpx;
        font-family: Source Han Sans CN-Bold, Source Han Sans CN;
        font-weight: bold;
        color: #333333;
        min-height: 84rpx;
        word-break: break-all;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
    .jh-goods-class{
       margin-top: 14rpx;
       display: flex;
       justify-content: space-between;
    }
    .jh-class-1{
        border-radius: 2rpx;
        opacity: 1;
        border: 1rpx solid #E96A1D;
        font-size: 24rpx;
        font-family: Source Han Sans CN-Regular, Source Han Sans CN;
        font-weight: 400;
        color: #E96A1D;
        white-space: normal;
        transform: scale(0.9);
    }
    .jh-goods-price{
        font-size: 26rpx;
        font-family: Source Han Sans CN-Bold, Source Han Sans CN;
        font-weight: bold;
        color: #E96A1D;
        margin-top: 20rpx;
    }
    .jh-goods-num{
        display: flex;
        justify-content: space-between;
        flex-direction: row;
        margin-top: 10rpx;
    }
    
    .jh-goods-stock{
        font-size: 22rpx;
        font-family: Source Han Sans CN-Regular, Source Han Sans CN;
        font-weight: 400;
        color: #333333;
    }
    .jh-goods-volume{
        font-size: 22rpx;
        font-family: Source Han Sans CN-Regular, Source Han Sans CN;
        font-weight: 400;
        color: #333333;
    }
</style>